<template>
  <div class="dc-goods-select">
    <div class="card">
      <div class="title">
        <slot name="title">{{title}}</slot>
      </div>
      <div class="content">
        <sa-draggable
          class="sa-flex sa-flex-wrap"
          v-model="listData"
          item-key="element"
          :animation="300"
          @end="updateItem"
        >
          <template #item="{ element, index }">
            <div class="goods-item">
              <sa-image :url="type=='goods'?element.image:element.feeds_img" size="44"></sa-image>
              <div class="goods-delete" @click="deleteGoods(index)">
                <el-icon>
                  <Delete />
                </el-icon>
              </div>
            </div>
          </template>
        </sa-draggable>
        <slot name="add">
          <el-button class="add-button" icon="Plus" @click="addGoods">添加</el-button>
        </slot>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'dc-goods-select',
  };
</script>
<script setup>
  /**
   * @property {Array} modelValue - 商品列表
   * @property {Boolean} multiple - 是否多选
   * @property {Number} max - 多选最大
   */
  import { ref, watch } from 'vue';
  import SaDraggable from 'vuedraggable';
  import { useModal } from '@/sheep/hooks';
  import GoodsSelect from '@/app/shop/admin/goods/goods/select.vue';
  import MpliveSelect from '@/app/shop/admin/app/mplive/select.vue';

  const emit = defineEmits(['update:modelValue']);
  const props = defineProps({
    modelValue: {
      type: Array,
      default: [],
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    max: {
      type: Number,
      default: 0,
    },
    type: {
      type: String,
      default: 'goods',
    },
	title: {
	  type: String,
	  default: '商品选择',
	},
  });

  const listData = ref(props.modelValue || []);
  watch(
    () => props.modelValue,
    () => {
      listData.value = props.modelValue;
    },
  );

  function addGoods() {
    let ids = [];
    listData.value.forEach((i) => {
      ids.push(i.id);
    });
    if (props.type == 'goods') {
      useModal(
        GoodsSelect,
        {
          title: '选择商品',
          multiple: props.multiple,
          max: props.max,
          ids,
        },
        {
          confirm: (res) => {
            listData.value.length = 0;
            if (props.multiple) {
              res.data.forEach((element) => {
                listData.value.push(element);
              });
            } else {
              listData.value.push(res.data);
            }

            updateItem()
          },
        },
      );
    } else if (props.type == 'mplive') {
      useModal(
        MpliveSelect,
        {
          title: '选择直播间',
        },
        {
          confirm: (res) => {
            listData.value.length = 0;
            // if (props.multiple) {
              res.data.forEach((element) => {
                listData.value.push(element);
              });
            // } else {
            //   listData.value.push(res.data);
            // }

            updateItem()
          },
        },
      );
    }
    
  }
  function deleteGoods(index) {
    listData.value.splice(index, 1);

    updateItem()

  }
  function updateItem() {
    emit('update:modelValue', listData.value);
  }
</script>
<style lang="scss" scoped>
  .dc-goods-select {
    .content {
      padding: 0 20px;
      .goods-item {
        margin: 0 8px 16px 0;
        position: relative;
        width: 44px;
        height: 44px;
        &:hover {
          .goods-delete {
            display: flex;
          }
        }
        .goods-delete {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          font-size: 16px;
          color: var(--sa-basic-mask-color);
          background: var(--sa-basic-mask-background);
          display: none;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
      .add-button {
        margin: 0 0 16px 0 !important;
      }
    }
  }
</style>
